<template>
  <div class="collectBox">
    <!-- 收藏头部 -->
    <div class="collectHeader">
      <i class="el-icon-collection-tag" style="color: rgb(255, 103, 0)"></i>
    </div>
    <!-- 单个商品的信息 -->
    <Good
      :ProductData="this.$store.state.collectData"
      @fadect="fadect"
      :isMore="true"
    ></Good>
    <!-- 收藏内容区域 没有数据时显示-->
    <div class="reminder" v-show="this.$store.state.collectData == ''">
      <div class="logoImg"></div>
      <div>
        <h1 class="size">您的收藏还是空的！</h1>
        <p>快去购物吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      flag: false,
    };
  },
  mounted() {},
  methods: {
    fadect(id) {
      // console.log(id);
      // 获取到当前商品的id后路由传参
      this.$router.push(`/details/${id}`);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.collectBox {
  width: 100%;
  margin-bottom: 20px;
  .el-icon-collection-tag::after {
    content: "我的收藏";
    color: black;
  }
 
}
</style>
